<template>
  <div>
    <h2>出差申请</h2>
    <form @submit.prevent="submitForm">
      <label for="userID">申请人ID:</label>
      <input id="userID" v-model="formData.userID" type="number" required>
      <label for="startDate">开始日期:</label>
      <input id="startDate" v-model="formData.startDate" type="date" required>
      <label for="endDate">结束日期:</label>
      <input id="endDate" v-model="formData.endDate" type="date" required>
      <label for="destination">目的地:</label>
      <input id="destination" v-model="formData.destination" type="text" required>
      <label for="purpose">出差目的:</label>
      <textarea id="purpose" v-model="formData.purpose" required />
      <button type="submit">提交申请</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        userID: null,
        startDate: null,
        endDate: null,
        destination: null,
        purpose: null
      }
    }
  },
  methods: {
    async submitForm() {
      try {
        const response = await this.$http.post('/travel - applications', this.formData)
        if (response.status === 201) {
          // 提交成功后可以进行一些操作，比如提示信息、清空表单等
          alert('出差申请提交成功!')
          this.formData = {
            userID: null,
            startDate: null,
            endDate: null,
            destination: null,
            purpose: null
          }
        }
      } catch (error) {
        console.error('提交出差申请失败:', error)
      }
    }
  }
}
</script>

<style scoped>
/* 整体表单容器样式 */
form{
  width: 100%;
  max-width: 600px; /* 限制最大宽度，避免在大屏幕上过于分散 */
  margin: 0 auto; /* 水平居中 */
  padding: 20px;
  box-sizing: border-box; /* 确保内边距不影响整体宽度 */
  background-color: #f4f4f4; /* 柔和的背景色 */
  border-radius: 8px; /* 圆角效果，更显柔和美观 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 轻微阴影，增加立体感 */
}

/* 标题样式 */
h2 {
  text-align: center; /* 标题居中 */
  color: #333; /* 深灰色标题文字，更清晰醒目 */
  margin-bottom: 20px;
}

/* 表单标签样式 */
label {
  display: block; /* 独占一行，清晰区分每个输入项 */
  font-size: 16px; /* 适当字体大小 */
  margin-bottom: 8px; /* 与输入框保持合适间距 */
  font-weight: 500; /* 适度加粗，增强区分度 */
}

/* 输入框和文本域通用样式 */
input,
textarea {
  width: 100%;
  padding: 12px; /* 增加内边距，输入更舒适 */
  border: 1px solid #ccc; /* 灰色边框 */
  border-radius: 4px; /* 输入框圆角 */
  margin-bottom: 18px; /* 输入框之间的间距 */
  font-size: 16px; /* 输入文字大小 */
  box-sizing: border-box; /* 保证内边距不撑大盒子 */
  transition: border-color 0.3s ease; /* 边框颜色过渡效果 */
}

input:focus,
textarea:focus {
  border-color: #007bff; /* 输入框获得焦点时边框变色 */
  outline: none; /* 去除默认的聚焦外框 */
}

/* 按钮样式 */
button {
  width: 100%;
  padding: 12px;
  background-color: #007bff; /* 蓝色按钮背景色，常见且醒目 */
  color: white; /* 白色文字，与背景形成对比 */
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer; /* 鼠标悬停变为手型 */
  transition: background-color 0.3s ease; /* 背景色过渡效果 */
}

button:hover {
  background-color: #0056b3; /* 鼠标悬停时按钮背景色加深 */
}

/* 响应式设计，在小屏幕设备上适当调整样式 */
@media screen and (max-width: 600px) {
  .form-container {
    padding: 15px; /* 减小内边距 */
  }
  input,
  textarea {
    margin-bottom: 15px; /* 减小输入框间距 */
  }
}
</style>

